<template>
  <div>
    <!--顶部搜索 -->
    <div class="top-operate">
      <div class="inline-flex">
        <el-select v-model.trim="textCol" class="width-150">
          <el-option label="包裹单号" value="packageNo"></el-option>
          <el-option label="发货单号" value="sendNo"></el-option>
          <el-option label="订单号" value="orderNo"></el-option>
          <el-option label="子订单号" value="apartOrderNo"></el-option>
          <el-option label="平台单号" value="externalOrderNo"></el-option>
          <el-option label="来源单号" value="sellApartOrderNo"></el-option>
          <el-option label="第三方包裹单号" value="thirdPackageNo"></el-option>
          <el-option label="运单号" value="trackingNo"></el-option>
          <el-option label="收货人姓名" value="consigneeName"></el-option>
          <el-option label="收货人手机" value="consigneePhone"></el-option>
        </el-select>
        <el-input v-model.trim="textValue" class="width-200" placeholder="请输入内容"></el-input>
      </div>
      <div class="inline-flex">
        <el-select v-model="timeCol" class="pad-l-10 width-120">
          <el-option label="创建时间" value="createTime"></el-option>
        </el-select>
        <el-date-picker v-model="timeValue"
          type="datetimerange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <el-select v-model="defaultQuery.enterpriseExpressId" placeholder="请选择物流公司" class="mar-l-10 width-160" clearable>
        <el-option v-for="express in expressList"
          :key="express.enterpriseExpressId"
          :label="express.expressName"
          :value="express.enterpriseExpressId">
        </el-option>
      </el-select>
      <template v-if="enterpriseRoleFlag">
        <el-select v-model="defaultQuery.source" placeholder="订单发货方" class="mar-l-10 width-160" clearable>
          <el-option v-for="(item, key) in dict.source" :key="key" :label="item" :value="key"></el-option>
        </el-select>
      </template>
      <el-button-group class="mar-l-20">
        <el-button type="primary" @click="doSearch">查询</el-button>
        <el-button @click="doResetSearch">重置</el-button>
      </el-button-group>
      <div class="search-item mar-t-10">
        <el-button @click="doExport">导出</el-button>
      </div>
    </div>
    <!-- 内容列表 -->
    <div class="table-container mar-t-15">
      <el-table :data="dataList" v-loading="listLoading" element-loading-text="加载中" @selection-change="handleSelectionChange">
        <el-table-column width="50px" type="selection"></el-table-column>
        <el-table-column width="200px" label="包裹单号" prop="packageNo">
          <template slot-scope="scope">
            <div>{{scope.row.packageNo}}</div>
            <div v-if="scope.row.thirdPackageNo">第三方包裹单号：{{scope.row.thirdPackageNo}}</div>
          </template>
        </el-table-column>
        <el-table-column width="260px" label="订单号">
          <template slot-scope="scope">
            <div>{{scope.row.orderNo}}</div>
            <div>子订单号：{{scope.row.apartOrderNo}}</div>
            <div v-if="scope.row.externalOrderNo">平台单号：{{scope.row.externalOrderNo}}</div>
            <div v-if="scope.row.sellApartOrderNo">来源单号：{{scope.row.sellApartOrderNo}}</div>
          </template>
        </el-table-column>
        <el-table-column width="260px" label="发货单号">
          <template slot-scope="scope">
            <div>{{ scope.row.sendNo }}</div>
          </template>
        </el-table-column>
        <el-table-column width="220px" label="收货信息">
           <template slot-scope="scope">
            <div>{{ scope.row.projectOrder.customerNickname }}</div>
            <div>{{ scope.row.projectOrder.customerPhone }}</div>
            <div class="line-2">{{ scope.row.projectOrder.customerFullAddress }}</div>
          </template>
        </el-table-column>
        <el-table-column width="200px" label="物流信息">
          <template slot-scope="scope">
            <div>{{scope.row.enterpriseExpressName}}</div>
            <div>运单号：{{scope.row.trackingNo}}</div>
          </template>
        </el-table-column>
        <el-table-column width="120px" label="商品数量" prop="goodsNum" align="center"></el-table-column>
        <el-table-column width="180px" label="创建时间" prop="createTime" align="center"></el-table-column>
        <el-table-column min-width="100px" label="操作" align="right" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="medium" @click="doLinkDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 列表分页 -->
    <div class="pagination">
      <el-pagination background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchListQuery.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="searchListQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!-- 包裹单详情dialog -->
    <el-dialog width="1000px" v-el-drag-dialog title="包裹单详情" :visible.sync="packageDetailVisible">
      <package-detail :showFlag="packageDetailVisible"
        :orderPackageId="selectOrderPackageId"
        @callback="packageDetailVisible = false">
      </package-detail>
    </el-dialog>

  </div>
</template>

<script>
  import { listExpress } from '@/api/goods/express'
  import { pageOrderPackage } from '@/api/order/orderPackage'
  import { downloadFile } from '@/api/common/common'
  import { getDictByGroupName } from '@/api/common/common'
  import packageDetail from './detail'
  import elDragDialog from '@/directive/el-dragDialog'

  export default {
    components: {
      packageDetail
    },
    directives: {
      elDragDialog
    },
    data() {
      return {
        // 文本model
        textCol: 'packageNo',
        textValue: '',
        // 时间model
        timeCol: 'createTime',
        timeValue: '',
        // 默认查询
        defaultQuery: {
          currentPage: 1,
          size: 10,
          enterpriseId: '',
          supplierId: '',
          warehouseId: '',
          enterpriseExpressId: '',
          source: ''
        },
        // 查询条件
        searchListQuery: {},
        // 数据字典
        dict: {
          source: {}
        },
        // 企业角色flag
        enterpriseRoleFlag: false,
        // 包裹详情visible
        packageDetailVisible: false,
        // 选中的id
        selectOrderPackageId: '',
        // 物流信息
        expressList: [],
        total: 0,
        listLoading: true,
        dataList: [],
        multipleSelection: []
      }
    },
    // 初始化页面
    created() {
      this.enterpriseRoleFlag = this.getSystemRoleType() === '1'
      this.searchListQuery = {
        ...this.defaultQuery
      }
      listExpress({ enterpriseId: this.getEnterpriseId(), supplierId: this.getSupplierId(), warehouseId: this.getWarehouseId(), expressStatus: 1 }).then(response => {
        this.expressList = response.data
      })
      // 获取数据字典
      getDictByGroupName('ProjectOrderDTO').then(response => {
        this.dict = response.data
      })
      this.initList()
    },
    methods: {
      // tab切换事件
      doChangeTab() {
        this.initList()
      },
      // 初始化
      initList() {
        this.listLoading = true
        this.setSearchListQuery()
        pageOrderPackage(this.searchListQuery).then(response => {
          this.listLoading = false
          if (response.isError) return
          this.dataList = response.data.records
          this.total = response.data.total
        })
      },
      // 设置查询条件
      setSearchListQuery() {
        const size = this.searchListQuery.size
        const currentPage = this.searchListQuery.currentPage
        this.searchListQuery = {
          ...this.defaultQuery
        }
        this.searchListQuery.size = size
        this.searchListQuery.currentPage = currentPage
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.searchListQuery.warehouseId = this.getWarehouseId()
        this.searchListQuery.supplierId = this.getSupplierId()
        this.searchListQuery[this.textCol] = this.textValue
        this.searchListQuery.dateColumn = this.timeCol
        this.searchListQuery.startDate = (this.timeValue && this.timeValue.length > 0) ? this.timeValue[0] : ''
        this.searchListQuery.endDate = (this.timeValue && this.timeValue.length > 1) ? this.timeValue[1] : ''
      },
      // 查询事件
      doSearch() {
        this.searchListQuery.currentPage = 1
        this.initList()
      },
      // 重置事件
      doResetSearch() {
        const originData = this.$options.data()
        this.textCol = originData.textCol
        this.textValue = originData.textValue
        this.timeCol = originData.timeCol
        this.timeValue = originData.timeValue
        this.defaultQuery = originData.defaultQuery
        this.doSearch()
      },
      // 导出事件
      doExport() {
        const url = '/order/projectOrderPackage/exportOrderPackage'
        const fileName = '包裹单_' + new Date().toLocaleString() + '.xlsx'
        if (this.multipleSelection.length > 0) {
          const orderPackageIds = this.multipleSelection.map(item => item.orderPackageId)
          downloadFile(url, { orderPackageIds: orderPackageIds.join(',') }, fileName)
        } else {
          this.setSearchListQuery()
          downloadFile(url, this.searchListQuery, fileName)
        }
      },
      // 查看详情事件
      doLinkDetail(row) {
        this.selectOrderPackageId = row.orderPackageId
        this.packageDetailVisible = true
      },
      // 勾选事件
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initList()
      }
    }
  }
</script>

<style lang="less" scoped>

</style>
